<template>
	<view class="markets">
		<Navbar>坊市</Navbar>
		<image :src="`${baseImageUrl}/home/h2.png`" class="header"></image>
		<view class="tabs">
			<view class="item" :class="active==1?'active':''" @click="changeActive(1)">藏品</view>
			<view class="item" :class="active==2?'active':''" @click="changeActive(2)">盲盒</view>
			<view class="item" :class="active==3?'active':''" @click="changeActive(3)">道具</view>
			<view class="item" :class="active==4?'active':''" @click="changeActive(4)">建筑</view>
			<view class="item" :class="active==5?'active':''" @click="changeActive(5)">宠物</view>
		</view>
		<CollectionList :type="active"></CollectionList>
		<!-- <CollectionList v-if="active==1"></CollectionList>
		<BlindBoxList v-if="active==2"></BlindBoxList>
		<BuildList v-else-if="active==3"></BuildList>
		<PetList v-else-if="active==5"></PetList> -->
	</view>
</template>

<script>
	import {
		orderSellList
	} from '@/request/api.js';
	import CollectionList from "@/components/home/CollectionList.vue";
	import BlindBoxList from "@/components/home/BlindBoxList.vue";
	import BuildList from "@/components/home/BuildList.vue";
	import PetList from "@/components/home/PetList.vue";

	export default {
		components: {
			CollectionList,
			BlindBoxList,
			BuildList,
			PetList
		},
		data() {
			return {
				active: 1,
				list: []
			}
		},
		onLoad() {
			this.getList();
		},
		provide() {
			return {
				get_list: () => this.list
			}
		},
		methods: {
			async getList() {
				let {
					list
				} = await orderSellList({
					page: this.page,
					limit: this.limit,
					product_type: this.active
				});
				this.last_page = list.last_page;
				list = list.list;
				this.list = this.page == 1 ? list : [...this.list, ...list];
			},
			changeActive(key) {
				this.active = key;
				this.page = 1;
				this.list = [];
				this.getList();
			}
		}
	}
</script>

<style scoped lang="scss">
	.markets {
		height: 100vh;
		background: #29170D;
		overflow: hidden;

		.header {
			width: 100%;
			height: 210rpx;
		}

		.tabs {
			width: 710rpx;
			height: 100rpx;
			margin: 0 auto;
			padding: 0 15rpx;
			box-sizing: border-box;
			background-color: rgba(31, 11, 5, 0.6);
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item {
				width: 180rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #FFFFFF;
				font-size: 36rpx;
				font-weight: 400;
				font-family: LiSu;

				&.active {
					color: #494338;
					background: url(#{$baseImageUrl}/common/active.png) no-repeat;
					background-size: 100% 100%;
				}
			}
		}
	}
</style>